<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>半透明边框</title>
  <style>
    html{
      background: #000;
    }
    div{
      border: 10px solid hsla(0,0%,100%,.3);
      /*
        hsla()函数
        hsla()函数使用色相、饱和度、亮度、透明度来定义颜色
        HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）
        色相 H 是色彩的基本属性，就是平常的颜色名称。取值范围 0~360
        饱和度 S 是指色彩的纯度 取值范围 0~100%
        亮度 L 取值范围 0~100%
        透明度 A 取值范围 0~1

        ！！！在以后的开发中，如果要使用透明度，我们不使用rgba了，而是使用hsla函数！！！
      */
      background: #FFFFFF;
      background-clip: padding-box;
      /*
        如果我们不加最后面这句代码
          background-clip: padding-box;
          透明的颜色边框并不会被我们看到，但是它其实已经生效了
          而我们只能接收它并且只能向前看
          background-clip默认值为border-box意味背景会被元素的border box边框的外沿框裁切掉
      */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>
